<template>
  <div class="login">
    <form-fragment @backMy="backHandle" v-if="activeForm != ''">
      <template #title>
        <div class="login-btn" v-if="activeForm === 'loginForm'">登录功能</div>
        <div class="reg-btn" v-if="activeForm === 'reginForm'">注册功能</div>
      </template>
      <template #form>
        <keep-alive>
          <component
            :is="activeForm"
            @gotoLogin="jumpLogin"
            @gotoUserDetail="jumpUserDetail"
            :account="tempLoginAccount"
            :email="tempLoginEmail"
          ></component>
        </keep-alive>
      </template>
    </form-fragment>
    <!-- <div>西餐厅</div> -->
    <van-swipe
      class="my-swipe"
      indicator-color="white"
      :show-indicators="false"
      @change="swipeHandle"
    >
      <van-swipe-item>
        <img
          src="../assets/focus4.jpg"
          alt=""
          :style="activeForm != '' ? imgStyle : ''"
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="../assets/focus2.jpg"
          alt=""
          :style="activeForm != '' ? imgStyle : ''"
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="../assets/focus3.jpg"
          alt=""
          :style="activeForm != '' ? imgStyle : ''"
        />
      </van-swipe-item>
      <template #indicator> </template>
    </van-swipe>
    <div
      class="content animate__animated"
      v-if="activeForm === ''"
      :class="{ animate__fadeOutDown: isGo }"
    >
      <div class="operation-btn">
        <div class="login-btn" @click="showFragment('loginForm')">登 录</div>
        <div class="regin-btn" @click="showFragment('reginForm')">注 册</div>
      </div>
      <div class="dicator">
        <div
          class="custom-indicator"
          :class="{ 'indicator-active': activeIndex === 0 }"
        ></div>
        <div
          class="custom-indicator"
          :class="{ 'indicator-active': activeIndex === 1 }"
        ></div>
        <div
          class="custom-indicator"
          :class="{ 'indicator-active': activeIndex === 2 }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import formFragment from "@/components/form-fragment.vue";
import loginForm from "@/components/login-form.vue";
import reginForm from "@/components/regin-form.vue";

export default {
  name: "login",
  components: {
    formFragment,
    loginForm,
    reginForm,
  },
  data() {
    return {
      activeIndex: 0,
      activeBtn: 0, // -1 0 1 取值
      activeForm: "",
      imgStyle: {
        filter: "blur(1px)",
      },
      isGo: false,
      tempLoginAccount: "", // 注册完后这里是注册成功的account
      tempLoginEmail: "",
    };
  },
  methods: {
    jumpLogin(data) {
      this.isGo = false;
      this.activeForm = "loginForm";
      this.tempLoginAccount = data.account;
      this.tempLoginEmail = data.userEmail;
    },
    jumpUserDetail(userInfo) {
      console.log(userInfo);
    },
    swipeHandle(index) {
      this.activeIndex = index;
    },
    showFragment(formName) {
      this.isGo = true;
      setTimeout(() => {
        this.activeForm = formName;
      }, 300);
    },
    backHandle() {
      this.isGo = false;
      this.activeForm = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;

  .my-swipe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    img {
      // filter: blur(3px);
      height: 100%;
    }
  }

  .content {
    z-index: 2;
    margin-bottom: 30px;
    animation-duration: 0.3s;
    // position: absolute;
    // left: 50%;
    // bottom: 10%;
    // transform: translateX(-50%);

    .dicator {
      display: flex;
      justify-content: center;

      .custom-indicator {
        width: 30px;
        height: 5px;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.5);
        margin: 0 5px;
      }

      .indicator-active {
        background-color: rgba(255, 255, 255, 0.9);
      }
    }

    .operation-btn {
      display: flex;
      justify-content: space-between;
      margin-bottom: 70px;
      .login-btn,
      .regin-btn {
        width: 130px;
        // width: 80px;
        height: 50px;
        border-radius: 20px;
        margin-bottom: 20px;
        background-color: rgba(255, 255, 255, 0.5);
        margin: 10px;
        text-align: center;
        line-height: 50px;
        font-weight: 700;
        font-size: 18px;
        color: #000;
      }

      // .login-btn {
      //   // width: 230px;
      //   background-color: rgba(0, 0, 0, 0.9);
      //   color: #fff;
      // }
    }
  }
}
</style>
